<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function Fn()
        {

        }
        //给Fn函数添加属性a
        Fn.prototype.a="aaa";
        //创建函数fn1
        var fn1=new Fn();
        console.log(fn1.a,fn1);//aaa
        //创建函数fn2
        var fn2=new Fn();
        console.log(fn2.a,fn2);//aaa
        //以上的a属性都是显示2的，意味着全都继承了原型的a
        
        //重新定义fn2的a属性
        fn2.a="bbb";
        //这次就只会影响fn2的a的值，而fn1不受影响
        console.log(fn2.a,fn2);///bbb
        console.log(fn1.a,fn1);//aaa

        //再给Fn.prototype的a属性重新赋值ccc
        Fn.prototype.a="ccc";
        //再一次重新输出fn1.a和fn2.a
        console.log(fn1.a,fn1);//ccc
        console.log(fn2.a,fn2);//bbb

        //总结：如果给Fn.prototype添加了一个属性值，那么新的函数都会继承该属性
        //但如果新函数重新对此属性定义了新值，那么被定义的新值将不会受Fn.prototype影响
        //但是没有经过修改的继承属性会随着Fn.prototype的修改而变化
        //即：如果自己定义了属性值，就找自己的属性值；如果是直接继承的属性值，那么将会随着原型函数的属性值的变化而变化
        //如Fn.prototype.a属性值在后面修改了，前面直接引用的也会随之修改，并且早于此次修改输出的fn1和fn1里面直接引用的a属性值也会随之改变
    </script>
</head>
<body>
    <!--
        1.读取对象的属性值时：会自动到原型链中查找
        2.设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
        3.方法一般定义在原型中，属性一般通过构造函数定义在对象本身上
    -->
</body>
</html>